<!--年选择组件-->
<template>
  <a-form-item :label="label">
    <a-date-picker
        ref="yearPicker"
        :style="getStyle"
        :placeholder="!isDisabled ? cplaceholder : ''"
        v-decorator="vDecorator"
        :disabled="isDisabled"
        :format="'YYYY'"
        mode="year"
        :initialValue="year"
        :open="open"
        @openChange="openChange"
        @panelChange="panelChange"
        :allowClear="allowClear"
    ></a-date-picker>
  </a-form-item>
</template>

<script>
import { mixin } from './js/form.js'
import moment from 'moment'
import 'moment/locale/zh-cn'

moment.locale('zh-cn')
export default {
  name: 'AntFormYearPicker',
  mixins: [mixin],
  components: {},
  props: {
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 是否由form表单自动布局
     */
    autoLayoutByForm: {
      type: Boolean,
      default: true
    },
    /**
     * 显示文本
     */
    label: {
      type: String,
      default: ''
    },
    /**
     * 输入提示
     */
    placeholder: {
      type: String,
      default: ''
    },
    /**
     * 绑定字段 ['phone' ,{ rules: [{ required: true},{validator:function(rule, value, callback)] }],自定义验证方法时callback回调函数必须在方法中调用，
     * 失败返回错误提示callback("xxx")，成功返回callback()
     */
    vDecorator: {
      type: Array,
      default: () => []
    },
    /**
     * 日期格式
     */
    format: {
      type: String,
      default: 'YYYY'
    },
    /**
     * 是否允许清除
     */
    allowClear: {
      type: Boolean,
      default: true
    },
    /**
     * css样式，优先级最高
     */
    cstyle: {
      type: String,
      default: ''
    },
    /**
     * 非自动布局的宽度，优先级最低
     */
    defaultWidth: {
      type: Number,
      default: 240
    }
  },
  data() {
    return {
      // 禁用条件一，只有为true的情况，该属性才会生效
      cdisabled: false,
      cplaceholder: this.placeholder ? this.placeholder : '请选择' + this.label,
      open: false,
      year: moment()
    }
  },
  computed: {
    /**
     * 获取样式
     */
    getStyle() {
      return { width: (this.percentageLayoutWidth ? this.percentageLayoutWidth : this.defaultWidth) + 'px', ...this.cstyle }
    }
  },
  created() {
  },
  mounted() {
    // 自动添加验证为空时的message
    let vDecorator = this.vDecorator
    if (vDecorator.length > 1 && vDecorator[1].rules) {
      let rules = vDecorator[1].rules
      rules.forEach((obj) => {
        if (obj.required && !obj.message) {
          obj.message = '请选择' + this.label
        }
      })
    }
  },
  watch: {},
  beforeDestroy() {
  },
  methods: {
    moment,
    openChange(status) {
      if (status) {
        this.open = true
      } else {
        this.open = false
      }
    },
    /**
     * 日期选择发生改变事件
     * @param date
     * @param dateString
     */
    panelChange(value) {
      this.open = false
      const form = this.getParentForm(this.$parent)
      const record = {}
      let _ids = this.vDecorator[0]
      record[_ids] = value
      form.setFieldsValue(record)
      this.$emit('change', value)
    },
    /**
     * 赋值之前的转换操作,由AntForm组件自动调用
     * 参数：recordPara，转换之前的record
     * 返回值：转换之后的可用于赋值的对象
     */
    beforeSetValue(recordPara) {
      let record = {}
      let key = this.vDecorator[0]
      let val = recordPara[key]
      val = val == null ? null : this.$moment(val, this.format)
      record[key] = val
      return record
    },
    /**
     * 取值之前的转换操作,由AntForm组件自动调用
     * 参数：recordPara，转换之前的record
     * 返回值：转换之后的对象
     */
    beforeGetValue(recordPara) {
      let record = {}
      let key = this.vDecorator[0]
      let val = recordPara[key]
      val = !val ? null : val.format(this.format)
      record[key] = val
      return record
    },
    getParentForm(param) {
      if (param.$refs.aform) {
        return param.$refs.aform.form
      } else {
        return this.getParentForm(param.$parent)
      }
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled),
::v-deep .ant-calendar-picker:focus .ant-calendar-picker-input:not(.ant-input-disabled) {
  border-color: #1a67f8;
}

::v-deep .ant-calendar-today .ant-calendar-date {
  border-color: #1a67f8;
  color: #1a67f8;
}

::v-deep .ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date,
::v-deep .ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date {
  background: #1a67f8;
}
</style>
